<template>
	<view class="page-box">
		<view class="content">
			<view class="word">{{word}}</view>
			<view class="form-box">
				<view class="label"><text>*</text>错误描述：</view>
				<view class="val">
					<textarea v-model="value" :focus="true" class="txt" placeholder="请输入单词错误内容描述"></textarea>
				</view>
			</view>
		</view>
		<view class="page-btn">
			<view :class="value.length>0?'btn':'btn disable'" @click="submit">提交</view>
		</view>
		<uni-popup ref="popup" type="center" @maskClick="close">
			<view class="pop-con">
				<image src="/static/suc.png" mode=""></image>
				<view class="txt">提交成功</view>
				<view class="tip">非常感谢您的反馈~</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				wordId:'',
				word:'',
			};
		},
		onLoad(e) {
			this.wordId=e.id;
			this.word=e.word;
		},
		methods:{
			submit(){
				if(!this.value){
					uni.showToast({
						title: '请输入单词错误内容描述',
						icon:'none'
					});
					return;
				}
				this.$http.post('api/word/errorReport/save',{
					wordId: this.wordId,
					content: this.value,
				}).then(res=>{
					if(res.code==200){
						this.$refs.popup.open();
						this.value='';
						
					}else{
						uni.showToast({
							title: res.message,
							icon:'none'
						});
					}
				})
			},
			close(){
				setTimeout(()=>{
					uni.navigateBack();
				},2000)
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F2F3F8;
	padding:20rpx 32rpx;
	box-sizing: border-box;
	.content{
		min-height: calc(100vh - 220rpx);
		background-color: #fff;
		box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42,65,152,0.05);
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.word{
			font-size: 60rpx;
			font-weight: bold;
			color: #333333;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E4E5EC;
		}
		.form-box{
			flex: 1;
			height: 100%;
			padding: 30rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.label{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				padding-bottom: 30rpx;
				text{
					position: relative;
					top: 10rpx;
					color: #f00;
					margin-right: 8rpx;
				}
			}
			.val{
				flex: 1;
				height: 800rpx;
				width: 100%;
				.txt{
					height: 800rpx;
					width: 100%;
				}
			}
		}
	}
	.page-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 176rpx;
		padding: 30rpx 62rpx;
		box-sizing: border-box;
		background-color: #fff;
		.btn{
			width: 100%;
			height: 90rpx;
			background: #5480F8;
			border-radius: 46rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			&.disable{
				background-color: #CAD8FC;
			}
		}
	}
}
.pop-con{
	background-color: #fff;
	width: 590rpx;
	height: 330rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	text-align: center;
	padding-top: 60rpx;
	image{
		width: 96rpx;
		height: 96rpx;
	}
	.txt{
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin: 20rpx 0;
		text-align: center;
	}
	.tip{
		font-size: 28rpx;
		font-weight: 400;
		color: #575A64;
	}
}
</style>
